*{box-sizing: border-box;}
html
body {
    --border-radius: 600px;
    --blue: #7992FF;
    --darkblue:#1C47FF;
    --orange: #FF6600;
    --red: #FE1B00; 
    --green: #F2FFD5;
    --black: #202020;
    --darkgrey: #3F3F3F;
    --midgrey: #6B6B6B;
    --gutter: 3.125vw 4.5vw;
    --background: #F0F0F0;
    --lightgreen: #a4ffde;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--darkgrey);
    color: var(--darkgrey);
    font-size: 20px;
    font-family: 'Syne', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}

main {margin-top: 100px;}

h1 {font-size: 80px;
    margin: 0px;}

h2 {font-size: 60px;
    margin: 0px;}

a {color: var(--green);
    text-decoration: none;}

section {
    width: 100%;
    display: flex;
    min-height: 80px;
    margin-bottom: 50px}

section.sticky {position: sticky;
                margin-top: 100px;}

section.full-screen {
    height: 100vh;
    top: 100vh;
    margin-top: 0;}

    /* navigation */

nav {position: fixed;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    z-index: 9999;
    margin: 0;
    padding: 0;
    background: var(--darkgrey);}

nav ul {display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;}

nav ul li {list-style: none;
    margin-left: 45px;}

nav ul li a {
    font-family: 'Doto', sans-serif;
    font-optical-sizing:none;
    font-weight: 200;
    font-style: normal;
    font-variation-settings: "ROND" 100;
    font-size: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-basis: 10vw;}

nav ul li a:hover {
    color: var(--orange);
    padding: 10px;
    background-color:var(--darkblue);
    border-radius: 40px;}

.line-container {
    width: 100%;           /* largeur de la section */
    height: 1vh;
    margin: 0;
    padding: 0;         /* hauteur de la ligne (ou plus fine) */
    overflow: hidden;
    position: relative;}

.fixed-line {
    width: 100%;           /* largeur de la section */
    height: 1px;
    top: 100px;  
    margin: 0;
    padding: 0;      /* hauteur de la ligne (ou plus fine) */
    overflow: hidden;
    position: fixed;}

.animated-line {
    width: 0%;             /* commence à 0 */
    height: 1px;
    margin: 0;
    padding: 0; 
    background-color: var(--orange);
    animation: drawLine 2s forwards; /* animation de 2s */}
@keyframes drawLine {
    from {width: 0%;}
    to {width: 100%;}}

    /* corps section */

section.corps article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0px;
    width: 100%;
    height: 100%;
    min-height: 0;}
.content-row {
  display: flex;
  flex-direction: row;
  gap: 10px; /* espace horizontal entre portrait et texte */
  align-items: flex-start; /* aligne portrait et texte sur le haut */}

section.corps article .title {
    width: 100%;           /* prend toute la largeur du parent */
    text-align: center;    /* centre le contenu horizontalement */
    margin: 0;             /* supprime les marges par défaut */
    margin-bottom: 10px;}
section.corps article .title h1 {
    margin: 10px 0px;                 /* supprime les marges par défaut */
    line-height: 0.95;         /* rapproche légèrement les lettres verticalement */
    display: inline-block;      /* permet un centrage propre et garde le width */
    width: auto;                /* laisse le titre s’adapter au texte */
    white-space: nowrap;        /* empêche le retour à la ligne */
    color: var(--blue);
    font-family: 'Syne', sans-serif;
    font-style: normal;
    animation-name: heartbeat;
    font-weight: 400;           /* ajustable selon ton design */}
section.corps article .title h1:hover {
    color:var(--green);}

section.corps article .content-row {
    display: flex;
    align-items: flex-start; /* alignement en haut */
    padding-inline: 15px;   /* marge gauche + droite */
    gap: 30px;              /* espace ENTRE image et texte */}

section.corps figure.portrait {
    flex: 0 0 30vw;       /* contrôle direct de la taille */
    margin: 0;}
section.corps figure.portrait img {
    width: 100%;
    border-radius: 40px;
    display: flex;}
section.corps figure.dessins img {
    width: 60vh;
    border-radius: 40px;
    display: flex;}
section.corps figure img:hover {
    mix-blend-mode:color-dodge ;}

section.corps article .contenu {
    flex: 2;
    margin: 0;
    color: var(--darkgrey);
    background: var(--green);
    animation: morph 50s ease-in-out infinite;
    padding: 50px 90px 50px 90px;
    font-family: 'Roboto', sans-serif;
    font-weight:200;
    font-style: normal;}
section.corps article .contenu:hover {
    background:#E8ECFF;}
section.corps p.text {
    align-items: end;
    line-height: 1.3;}
section.corps span.gras {
    color: var(--darkgrey);
    font-weight:350}
section.corps span.soustitre {
    color: var(--orange);
    font-weight:500;
    font-family: 'Syne', sans-serif;
    font-size: 30px;}
section.corps span.gras:hover {
    color:var(--black);}
section.sticky {position: sticky;
                top: 100px;
                margin-bottom: 0px;}

#Services {
  scroll-margin-top: 120px;
}

/*animation */
.heartbeat {
    font-family: 'Syne', sans-serif;
    font-weight: 400; /* poids de base */
    display: outline-block;
    animation: heartbeat;
    animation-iteration-count: infinite;
    animation-duration: 50s;
    transform-origin: center;}
@keyframes heartbeat {
  0% {font-weight: 400;}
  20% {font-weight: 800; /* épaississement */}
  40% {font-weight: 400;}
  60% {font-weight: 800;}
  80% {font-weight: 400;}
  100% {font-weight: 800;}}

@keyframes morph {
    0% {border-radius: 25% 0% 35% 10%;}
    25% {border-radius: 10% 25% 0% 35%;}
    50% {border-radius: 35% 10% 25% 0%;}
    75% {border-radius: 0% 35% 10% 25%;}
    100% {border-radius: 25% 0% 35% 10%;}}


/* responsive */

@media (max-width:768px){
html,body{font-size:16px}
main{margin-top:80px}
h1{font-size:42px}
h2{font-size:32px}
section.corps article .title h1{
    white-space:normal;
    text-align:center;
    line-height:1}
nav{height:80px}
nav ul{
    justify-content:space-around;
    gap:15px}
nav ul li{margin-left:0}
nav ul li a{
    font-size:18px;
    flex-basis:auto}
nav ul li a:hover{
    padding:6px 10px;
    border-radius:30px}
.fixed-line{top:80px}
section{margin-bottom:30px}
section.full-screen{
    height:auto;
    min-height:100vh}
section.corps article{gap:15px}
section.corps article .content-row{
    flex-direction:column;
    gap:20px;
    padding-inline:15px;
    margin-inline:auto;}
section.corps figure.portrait{
    flex:none;
    width:100%;
    justify-content: center;}
section.corps figure.portrait img,section.corps figure.dessins img{
    width:100%;
    max-width:70%;
    margin-inline:auto;
    border-radius:30px;}
section.corps article .contenu{
    padding:40px;
    font-size:15px}
section.corps p.text{line-height:1.4}
section.corps span.soustitre{font-size:22px}
}

@media (max-width:480px){
html,body{font-size:14px}
h1{font-size:34px}
h2{font-size:26px}
nav{height:70px}
nav ul li a{font-size:16px}
.fixed-line{top:70px}
section.corps article .contenu{padding:40px}
section.corps span.soustitre{font-size:20px}
}